<template>
  <div class="page">
    <div class="page-ctx">
      <div class="inner">
        <div class="banner-box">
          <div class="lunbo-wrap">
            <div class="lunbo-box">
              <el-carousel trigger="click" :autoplay="true">
                <el-carousel-item v-for="(item, index) in index_banners" :key="index"
                  @click.native="do_banner_click(item)">
                  <img :src="item.image" alt="" />
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="lunbo-cont">
              <div class="lunbo-inner w-1200 flex-between">
                <div class="lunbo-left">
                  1
                  <!-- <asideChannelNav v-if="config.asideClassifyType == 1" />
                  <asideChannelNav2 v-if="config.asideClassifyType == 2" />
                  <asideChannelNav3 v-if="config.asideClassifyType == 3" />
                  <asideChannelNav4 v-if="config.asideClassifyType == 4" /> -->
                </div>
                <div class="lunbo-right">
                  <div class="right">
                    <div class="user-box">
                      <div class="avatar-box" @click="$router.push('userIndex')">
                        <template v-if="!vuex_is_login">
                          <img :src="defaultAvatar" />
                        </template>
                        <template v-else>
                          <img :src="baseInfo.user_image || defaultAvatar" />
                        </template>
                      </div>
                      <div class="tip-box">
                        <template v-if="!vuex_is_login">Hi，欢迎注册登录</template>
                        <template v-else>Hi，{{ baseInfo.name }}</template>
                      </div>
                      <div class="operate-box">
                        <el-button @click="$router.push('login')" v-if="!vuex_is_login" class="denglu">登录</el-button>
                        <el-button @click="$router.push('register')" v-if="!vuex_is_login" class="zhuce">注册</el-button>
                        <el-button @click="logout" v-else class="denglu">退出</el-button>
                      </div>
                    </div>

                    <div class="tequan-list">
                      <div class="tequan-item" v-for="(item, index) in nav_list" :key="index"
                        @click="$router.push(item.route)">
                        <div class="img-box">
                          <img :src="item.icon" alt="" />
                        </div>
                        <div class="tequan-title">
                          {{ item.title }}
                        </div>
                      </div>
                    </div>

                    <div class="right-list">
                      <div class="title">
                        <div class="text">商城公告</div>
                        <router-link to="newsList">查看更多 ></router-link>
                      </div>
                      <p v-for="(item, index) in list_news" :key="index" @click="goNewdetail(item)">
                        {{ item.title }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>







        <div class="content-box w-1200">
          <div class="sec-item hot-sec">
            <div class="sec-title-box">
              <div class="title-left">
                <div class="sec-title color-0">{{ "热销产品" }}</div>
                <div class="sec-divider">/</div>
                <div class="sec-desc">Hot products</div>
              </div>
              <div class="sec-more hover">
                <!-- <img
                  class="arrow"
                  src="@img/hot-arrow-left.png"
                  alt=""
                  @click="hotPanelMinus()"
                />
                <img
                  class="arrow"
                  src="@img/hot-arrow-right.png"
                  alt=""
                  @click="hotPanelAdd()"
                /> -->
              </div>
            </div>
            <div class="sec-ctx">
              <div class="hot-lunbo">
                <el-carousel ref="hotLunbo" trigger="click" :autoplay="true">
                  <el-carousel-item v-for="(group, gindex) in hotProductGroups" :key="gindex">
                    <div class="product-list">
                      <div class="product-item hover" v-for="(item, index) in group" :key="index"
                        @click="toDetail(item)">
                        <div class="poster-box scale-box">
                          <img class="scale-img" :src="item.img" alt="" />
                        </div>
                        <div class="info-box">
                          <div class="title">
                            {{ item.title }}
                          </div>
                          <div class="price">
                            <div class="pirce-num">
                              ￥ {{ item.price_sale }}
                            </div>
                            <div class="chengjiao">成交{{ item.orders }}个</div>
                          </div>
                          <div class="btn btn-ripple">立即购买</div>
                        </div>
                      </div>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>

          <div class="adv-box">
            <!-- <img src="@img/adv-1.png" alt="" /> -->
          </div>

          <div class="sec-item" v-for="(cate, gindex) in cateGroup" :key="gindex" :data-id="cate.id">
            <div class="sec-title-box">
              <div class="title-left">
                <div class="sec-title" :class="'color-' + gindex">
                  {{ cate.title }}
                </div>
                <div class="sec-divider">/</div>
                <div class="sec-desc">{{ cate.remark }}</div>
              </div>
              <div class="sec-more hover" @click="toCateMore(cate)">
                <span class="text">更多产品</span>
                <img class="arrow" :src="cate.originalPic" alt="" />
              </div>
            </div>

            <div class="sec-ctx">
              <!-- <div class="sec-left">
                <img :src="cate.backimg" alt="" />
              </div> -->
              <div class="sec-right">
                <div class="product-list">
                  <div class="product-item hover" v-for="(item, index) in cate.products" :key="index"
                    @click="toDetail(item)">
                    <div class="poster-box scale-box">
                      <img class="scale-img" :src="item.thumb" alt="" />
                    </div>
                    <div class="info-box">
                      <div class="title">
                        {{ item.title }}
                      </div>
                      <div class="price">
                        <div class="pirce-num">￥ {{ item.priceSale }}</div>
                        <div class="chengjiao">成交{{ item.orders }}个</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>



      </div>
    </div>


    <order_manjian_modal ref="order_manjian_modal" />
  </div>
</template>
<script>
//import { Swiper, SwiperOptions, Pagination, Navigation } from "swiper";
//import "swiper/swiper-bundle.min.css";
import productList from "@/components/product/productList.vue";
import order_manjian_modal from "@/components/activity/order_manjian_modal.vue";

import { mapState } from "vuex";

import dayjs from 'dayjs'


export default {
  name: "index",
  components: {
    productList,
    order_manjian_modal,
  },
  data() {
    return {
      nav_list: [
        {
          title: '收货地址',
          icon: require('@/static/index/nav-1.png'),
          route: '/address-list',
        },
        {
          title: '我的订单',
          icon: require('@/static/index/nav-2.png'),
          route: '/order-list',
        },
        {
          title: '购物车',
          icon: require('@/static/index/nav-3.png'),
          route: '/cart',
        },
        {
          title: '个人中心',
          icon: require('@/static/index/nav-4.png'),
          route: '/userCenter',
        },
        {
          title: '购物指南',
          icon: require('@/static/index/nav-5.png'),
          route: '/terms',
        },
        {
          title: '在线客服',
          icon: require('@/static/index/nav-6.png'),
          route: '/kefu',
        },
      ],
      cateGroup: [],

      todayHasPlayAni: true, //不需要展示动画


      product_list_1: [],
      product_list_2: [],

      // star_value: 4,
      reviews_group: []
      //
    };
  },
  computed: {
    ...mapState([
      //
      "index_banners",
      "index_full_ani",
      "hotSearchWords",
    ]),

  },

  watch: {},
  created() {
    this.get_cache_date()

    this.setView();
  },
  mounted() {
    this.handleAni()
  },
  methods: {
    get_cache_date() {
      let todayHasPlayAni = false;
      let date_play_str = localStorage.getItem("playAniDate") || "";
      let date_curr = dayjs().format('YYYY-MM-DD');

      console.log('date_play_str', date_play_str)
      if (date_play_str) {
        let date_play = date_play_str;
        if (date_play == date_curr) {
          //如果今天有播放当前动画  则不再播放
          todayHasPlayAni = true;
          // todayHasPlayAni = false;

          console.warn('todayHasPlayAni', todayHasPlayAni)
        }
      }

      this.todayHasPlayAni = todayHasPlayAni;

    },
    handleAni() {
      if (!this.todayHasPlayAni) {
        this.todayHasPlayAni = true;
        localStorage.setItem(
          "playAniDate",
          dayjs().format('YYYY-MM-DD')
        );
        this.$nextTick(() => {
          this.$refs.order_manjian_modal.init()
        })
      }
    },

    setView() {
      this.query_cates_add_products()
      this.query_product_cate1()
      this.query_product_cate2()
      this.query_reviews()
    },

    query_cates_add_products() {
      //首页分类甲产品
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_channelPdts",
          channelNum: 20,
          pdtNum: 8,
        },
      })
        .then((res) => {
          console.warn("首页分类产品", res);
          this.cateGroup = res.data;
        });
    },
    query_product_cate1() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          ifShowSku: 1,
          channelId: 780,
          page: 1,
          pageNum: 8,
        },
      }).then((res) => {
        let { code, data, count } = res;
        if (code == 200) {
          let { list, count, pages } = data;
          this.product_list_1 = list;
          // this.count = count;
        }
      });
    },
    query_product_cate2() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          ifShowSku: 1,
          channelId: 792,
          page: 1,
          pageNum: 8,
        },
      }).then((res) => {
        let { code, data, count } = res;
        if (code == 200) {
          let { list, count, pages } = data;
          this.product_list_2 = list;
          // this.count = count;
        }
      });
    },

    query_reviews() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_comments",
          page: 1,
          pageNum: 12,
          productId: 0,
          ifIndex: 1,
        },
      }).then((res) => {
        let { code, data, count } = res;
        if (code == 200) {
          let { list, count, pages } = data;
          this.reviews = list;


          let reviews_group = [];
          let items_length = 4;//4个一组
          list.forEach((v, i) => {
            let group_index = Math.floor(i / items_length);
            if (!reviews_group[group_index]) {
              reviews_group[group_index] = [];
            }
            reviews_group[group_index].push(v);
          });
          this.reviews_group = reviews_group;
        }
      });
    },

    do_banner_click(item) {
      //console.log({ ...item });
      if (item.url) {
        window.open(item.url, "_blank");
      } else if (item.inventoryId) {
        this.$router.push("/product-detail/" + (item.skuId || item.inventoryId));
      }
    },

    do_swiper_prev() {
      this.$refs.swiper_review.prev()
    },
    do_swiper_next() {
      this.$refs.swiper_review.next()
    },
  },
};
</script>


<style lang="less">
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #4CA5E4;
  color: #fff !important;
}

.el-select-dropdown__item.selected {
  color: #4CA5E4;
}
</style>

<style scoped lang="less">
/deep/ .el-rate__icon {
  font-size: 20px;
  margin-right: 0;
}


.banner-box .lunbo-box {
  position: relative;
  width: 100%;
  height: 480px;

  /deep/ .el-carousel__container {
    height: 480px;
  }

  /deep/ img {
    width: 100%;
    height: 480px;
    cursor: pointer;
  }
}

.lunbo-cont {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  .lunbo-inner {
    .lunbo-left {}

    .lunbo-right {
      .right {
        width: 230px;
        height: 480px;
        padding-top: 20px;
        // background: rgba(250, 250, 250, 0.6);
        background: #f8f8f8;
        // background: #fff;

        .user-box {
          text-align: center;

          .avatar-box {
            cursor: pointer;
            display: inline-block;
            width: 62px;
            height: 62px;
            border-radius: 50%;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .tip-box {
            color: #333;
            font-size: 14px;
            margin-top: 10px;
          }

          .operate-box {
            margin-top: 15px;

            button {
              font-size: 12px;
              padding: 0;
              min-width: 57px;
              height: 25px;
              line-height: 25px;
              background: var(--main_color);
              opacity: 1;
              border-radius: 4px;
              border: none;

              &.denglu {
                background: var(--main_color);
                color: #fff;
              }

              &.zhuce {
                background: #fff;
                color: var(--main_color);
              }
            }
          }
        }

        .right-list {
          border-top: 1px dashed #999;
          border-bottom: 1px dashed #999;
          margin: 10px;
          padding: 10px 5px;
          text-align: left;
          margin-top: 30px;
          height: 96px;
          overflow: hidden;

          .title {
            .flex-between();
            font-size: 16px;
            font-family: MicrosoftYaHei;
            line-height: 45px;
            color: #333;

            .text {
              font-size: 14px;
              color: #333333;
            }

            a {
              font-size: 12px;
              color: #666666;
            }
          }

          p {
            font-size: 14px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            padding: 6px 0;
            text-align: left;
          }

          p:hover {
            color: var(--main_color);
          }
        }

        .tequan-wrap-title {
          padding-left: 18px;
          padding-bottom: 10px;
          text-align: left;
          font-size: 14px;
          color: #333333;
        }

        .tequan-list {
          .flex();
          flex-wrap: wrap;
          padding: 0 6px;

          .tequan-item {
            width: 33.33%;
            margin-top: 15px;

            &:nth-child(-n + 3) {
              margin-top: 0;
            }

            .img-box {
              img {
                width: 34px;
                height: 34px;
              }
            }

            .tequan-title {
              margin-top: 10px;
              font-size: 12px;
              color: #666666;
            }
          }
        }

        .showMore {
          text-align: right;
          margin-right: 20px;
          margin-top: 15px;

          a {
            font-size: 13px;
            font-family: MicrosoftYaHei;
            line-height: 30px;
            color: #333;

            &:hover {
              color: var(--main_color);
            }
          }
        }
      }
    }
  }
}





.page {
  background: #FFFFFF;
  padding-top: 0;
  padding-bottom: 95px;

  // background: #fff;
  .inner {
    padding-top: 0;
    // width: @width;
    margin: 0 auto;
    position: relative;
  }
}


.sec-item {
  padding-top: 40px;

  .sec-title {
    margin-bottom: 73px;
    text-align: center;
    font-family: Poppins, Poppins;
    font-weight: 600;
    font-size: 40px;
    color: #333333;
  }

  .sec-ctx {
    width: @width;
    margin: 0 auto;
  }

  .more-box {
    margin-top: 72px;
    text-align: center;

    a {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 50px;
      background: #4CA5E4;
      border-radius: 0px 0px 0px 0px;

      font-family: OPPOSans, OPPOSans;
      font-weight: bold;
      font-size: 18px;
      color: #FFFFFF;
    }
  }
}

.sec-cate1 {
  margin-top: 70px;
  margin-bottom: 96px;
}

.sec-cate2 {
  margin-top: 0px;
  margin-bottom: 136px;
}








//
.content-box {

  margin: 0 auto;
  padding-top: 35px;

  .sec-item {
    margin-bottom: 40px;

    .sec-title-box {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title-left {
        display: flex;
        align-items: flex-end;

        .sec-title {
          font-size: 28px;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;

          &.color-0 {
            color: #eb0f19;
          }

          &.color-1 {
            color: #e68d1d;
          }

          &.color-2 {
            color: #97563e;
          }

          &.color-3 {
            color: #5868be;
          }

          &.color-4 {
            color: #dd6641;
          }

          &.color-5 {
            color: #8a67c7;
          }

          &.color-6 {
            color: #83be41;
          }

          &.color-7 {
            color: #d6426f;
          }

          &.color-8 {
            color: #b74b4b;
          }

          &.color-9 {
            color: #0cb89d;
          }
        }

        .sec-divider {
          margin: 0 15px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #999999;
        }

        .sec-desc {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }

      .sec-more {
        .flex();

        .text {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .arrow {
          margin-left: 10px;
          width: 17px;
          height: 17px;
        }
      }
    }
  }
}

.sec-ctx {
  display: flex;
  align-items: flex-start;

  // .sec-left {
  //   width: 320px;
  //   height: 566px;
  //   img {
  //     width: 100%;
  //     height: 100%;
  //   }
  // }
  .sec-right {
    flex: 1;
    overflow: hidden;
    align-self: stretch;
    background: #fff;

    .product-list {
      display: flex;
      flex-wrap: wrap;

      .product-item {
        padding: 20px;
        width: 240px;
        height: 283px;
        border-top: 1px solid #eee;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;

        .poster-box {
          margin: 0 auto;
          width: 162px;
          height: 162px;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .info-box {
          text-align: left;
          padding-top: 24px;

          .title {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #333333;
          }

          .price {
            .flex-between();
            margin-top: 16px;
            font-size: 18px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #eb0f19;

            .chengjiao {
              color: #777;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

.hot-sec {
  .sec-more {
    .flex();

    img {
      margin-left: 10px;
    }
  }

  .hot-lunbo {
    position: relative;
    width: 100%;
    height: 430px;

    /deep/ .el-carousel__container {
      height: 417px;
    }

    /deep/ img {
      object-fit: cover;
    }
  }

  .product-list {
    display: flex;
    flex-wrap: wrap;

    .product-item {
      padding: 25px;
      width: 282px;
      height: 417px;
      margin-right: 23px;
      background: #fff;

      &:nth-child(4n) {
        margin-right: 0;
      }

      .poster-box {
        margin: 0 auto;
        width: 233px;
        height: 233px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .info-box {
        text-align: left;
        padding-top: 24px;

        .title {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .price {
          .flex-between();
          margin-top: 16px;
          font-size: 18px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #eb0f19;

          .chengjiao {
            color: #777;
            font-size: 14px;
          }
        }

        .btn {
          margin-top: 20px;
          line-height: 40px;
          text-align: center;
          width: 233px;
          height: 40px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #dddddd;
          font-size: 16px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #333333;

          &:hover {
            background: #eb0f19;
            color: #ffffff;
          }
        }
      }
    }
  }
}

.adv-box {
  margin-bottom: 40px;

  img {
    width: 100%;
  }
}
</style>

<style scoped lang="less" src="@/assets/h5css/page/index.less"></style>

<style scoped lang="less" src="@/assets/h5css/mobile/index.less"></style>
